<template>
  <div class="probation-assessment">
    <div class="header">
      <router-link to="/main/renshi/zhaoping/process" class="back-btn">
        <i class="el-icon-arrow-left"></i>
        <span>返回</span>
      </router-link>
      <h2>试用期考核</h2>
    </div>

    <div class="content">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="待考核" name="pending">
          <el-table :data="pendingList" style="width: 100%">
            <el-table-column prop="name" label="姓名" width="120"></el-table-column>
            <el-table-column prop="position" label="职位" width="150"></el-table-column>
            <el-table-column prop="department" label="部门" width="120"></el-table-column>
            <el-table-column prop="entryDate" label="入职日期" width="180"></el-table-column>
            <el-table-column prop="probationEndDate" label="试用期截止" width="180"></el-table-column>
            <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <el-button size="mini" @click="startAssessment(scope.row)">开始考核</el-button>
                <el-button size="mini" @click="viewDetail(scope.row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="已考核" name="completed">
          <el-table :data="completedList" style="width: 100%">
            <el-table-column prop="name" label="姓名" width="120"></el-table-column>
            <el-table-column prop="position" label="职位" width="150"></el-table-column>
            <el-table-column prop="department" label="部门" width="120"></el-table-column>
            <el-table-column prop="assessmentResult" label="考核结果" width="120">
              <template slot-scope="scope">
                <el-tag :type="getResultType(scope.row.assessmentResult)">
                  {{ scope.row.assessmentResult }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="assessmentDate" label="考核日期" width="180"></el-table-column>
            <el-table-column label="操作" width="120">
              <template slot-scope="scope">
                <el-button size="mini" @click="viewDetail(scope.row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 考核表单对话框 -->
    <el-dialog title="试用期考核" :visible.sync="assessmentDialogVisible" width="60%">
      <el-form :model="assessmentForm" label-width="120px" v-if="currentEmployee">
        <el-form-item label="基本信息">
          <el-descriptions :column="2" border size="small">
            <el-descriptions-item label="姓名">{{ currentEmployee.name }}</el-descriptions-item>
            <el-descriptions-item label="职位">{{ currentEmployee.position }}</el-descriptions-item>
            <el-descriptions-item label="部门">{{ currentEmployee.department }}</el-descriptions-item>
            <el-descriptions-item label="入职日期">{{ currentEmployee.entryDate }}</el-descriptions-item>
          </el-descriptions>
        </el-form-item>

        <el-form-item label="工作能力">
          <el-rate v-model="assessmentForm.workAbility" :max="5" show-text
            :texts="['较差', '一般', '良好', '优秀', '极佳']">
          </el-rate>
        </el-form-item>

        <el-form-item label="工作态度">
          <el-rate v-model="assessmentForm.workAttitude" :max="5" show-text
            :texts="['较差', '一般', '良好', '优秀', '极佳']">
          </el-rate>
        </el-form-item>

        <el-form-item label="团队协作">
          <el-rate v-model="assessmentForm.teamwork" :max="5" show-text
            :texts="['较差', '一般', '良好', '优秀', '极佳']">
          </el-rate>
        </el-form-item>

        <el-form-item label="学习能力">
          <el-rate v-model="assessmentForm.learningAbility" :max="5" show-text
            :texts="['较差', '一般', '良好', '优秀', '极佳']">
          </el-rate>
        </el-form-item>

        <el-form-item label="考核结果">
          <el-radio-group v-model="assessmentForm.result">
            <el-radio label="通过">通过</el-radio>
            <el-radio label="延长试用期">延长试用期</el-radio>
            <el-radio label="不通过">不通过</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="考核评语">
          <el-input type="textarea" v-model="assessmentForm.comment" rows="4"></el-input>
        </el-form-item>

        <el-form-item label="改进建议">
          <el-input type="textarea" v-model="assessmentForm.suggestion" rows="4"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="assessmentDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitAssessment">提交考核</el-button>
      </div>
    </el-dialog>

    <!-- 详情对话框 -->
    <el-dialog title="考核详情" :visible.sync="detailDialogVisible" width="60%">
      <div class="assessment-detail" v-if="currentEmployee">
        <el-descriptions title="基本信息" :column="2" border>
          <el-descriptions-item label="姓名">{{ currentEmployee.name }}</el-descriptions-item>
          <el-descriptions-item label="职位">{{ currentEmployee.position }}</el-descriptions-item>
          <el-descriptions-item label="部门">{{ currentEmployee.department }}</el-descriptions-item>
          <el-descriptions-item label="入职日期">{{ currentEmployee.entryDate }}</el-descriptions-item>
          <el-descriptions-item label="考核结果">{{ currentEmployee.assessmentResult }}</el-descriptions-item>
          <el-descriptions-item label="考核日期">{{ currentEmployee.assessmentDate }}</el-descriptions-item>
        </el-descriptions>

        <div class="assessment-scores" v-if="currentEmployee.assessment">
          <h4>考核评分</h4>
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="score-item">
                <div class="label">工作能力</div>
                <el-rate v-model="currentEmployee.assessment.workAbility" disabled></el-rate>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="score-item">
                <div class="label">工作态度</div>
                <el-rate v-model="currentEmployee.assessment.workAttitude" disabled></el-rate>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="score-item">
                <div class="label">团队协作</div>
                <el-rate v-model="currentEmployee.assessment.teamwork" disabled></el-rate>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="score-item">
                <div class="label">学习能力</div>
                <el-rate v-model="currentEmployee.assessment.learningAbility" disabled></el-rate>
              </div>
            </el-col>
          </el-row>
        </div>

        <div class="assessment-comments" v-if="currentEmployee.assessment">
          <h4>考核评语</h4>
          <p>{{ currentEmployee.assessment.comment }}</p>
          <h4>改进建议</h4>
          <p>{{ currentEmployee.assessment.suggestion }}</p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'pending',
      pendingList: [
        {
          id: 1,
          name: '张三',
          position: '前端开发工程师',
          department: '技术部',
          entryDate: '2024-01-01',
          probationEndDate: '2024-04-01'
        }
      ],
      completedList: [
        {
          id: 2,
          name: '李四',
          position: '后端开发工程师',
          department: '技术部',
          assessmentResult: '通过',
          assessmentDate: '2024-03-15',
          assessment: {
            workAbility: 4,
            workAttitude: 5,
            teamwork: 4,
            learningAbility: 4,
            comment: '工作认真负责，能力突出',
            suggestion: '建议继续加强团队协作能力'
          }
        }
      ],
      assessmentDialogVisible: false,
      detailDialogVisible: false,
      currentEmployee: null,
      assessmentForm: {
        workAbility: 3,
        workAttitude: 3,
        teamwork: 3,
        learningAbility: 3,
        result: '通过',
        comment: '',
        suggestion: ''
      }
    }
  },
  methods: {
    getResultType(result) {
      const map = {
        '通过': 'success',
        '延长试用期': 'warning',
        '不通过': 'danger'
      }
      return map[result] || 'info'
    },
    startAssessment(row) {
      this.currentEmployee = row
      this.assessmentForm = {
        workAbility: 3,
        workAttitude: 3,
        teamwork: 3,
        learningAbility: 3,
        result: '通过',
        comment: '',
        suggestion: ''
      }
      this.assessmentDialogVisible = true
    },
    viewDetail(row) {
      this.currentEmployee = row
      this.detailDialogVisible = true
    },
    submitAssessment() {
      if (!this.assessmentForm.comment) {
        this.$message.error('请填写考核评语')
        return
      }

      // TODO: 提交考核结果到后端
      this.currentEmployee.assessmentResult = this.assessmentForm.result
      this.currentEmployee.assessmentDate = new Date().toLocaleDateString()
      this.currentEmployee.assessment = { ...this.assessmentForm }

      // 从待考核列表移动到已考核列表
      const index = this.pendingList.findIndex(item => item.id === this.currentEmployee.id)
      if (index > -1) {
        this.pendingList.splice(index, 1)
        this.completedList.unshift(this.currentEmployee)
      }

      this.$message.success('考核提交成功')
      this.assessmentDialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.probation-assessment {
  padding: 20px;

  .header {
    margin-bottom: 30px;
    position: relative;
    text-align: center;

    .back-btn {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      text-decoration: none;
      color: #606266;
      display: flex;
      align-items: center;
    }

    h2 {
      margin: 0;
      font-size: 24px;
      color: #303133;
    }
  }

  .content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  }

  .assessment-scores {
    margin: 20px 0;

    h4 {
      margin: 0 0 15px;
      color: #303133;
    }

    .score-item {
      text-align: center;
      
      .label {
        margin-bottom: 10px;
        color: #606266;
      }
    }
  }

  .assessment-comments {
    h4 {
      margin: 15px 0 10px;
      color: #303133;
    }

    p {
      margin: 0;
      color: #606266;
      line-height: 1.6;
    }
  }
}
</style> 